<template>
  <a-drawer
    title="费用明细"
    placement="right"
    :width="width"
    :closable="true"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="close"
  >
    <a-divider orientation="left">
      基础信息
    </a-divider>
    <j-form-container disabled>
      <a-form slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-item label="ETD" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.etd"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="客户业务编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.customerNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="主单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.mainOffNumber"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left">
        应收明细
      </a-divider>
      <j-vxe-table
        ref="receivableTable"
        row-number
        row-selection
        resizable
        keep-source
        :loading="confirmLoading"
        :height="350"
        :dataSource="receivableList"
        :columns="receiveCol"
        style="margin-top: 8px;"
        @selectRowChange="handleSelectRowChange"
        :edit-config="{trigger: 'click', mode: 'cell', activeMethod: recactiveCellMethod}"

        :checkbox-config="{checkMethod: recCheckboxkMethod}"
        :cell-style='cellStyle'
        bordered
      >
        <template v-slot:toolbarAfter>
          <a-button style="margin-bottom: 10px;margin-right: 10px" @click="submitsh1(1)">通过审核</a-button>
          <a-button @click="submitsh1(2)">驳回</a-button>
        </template>

      </j-vxe-table>
      <a-divider orientation="left">
        应付明细
      </a-divider>
      <j-vxe-table
        ref="payTable"
        resizable
        row-number
        row-selection
        :loading="confirmLoading"
        keep-source
        :height="350"
        :dataSource="payList"
        :columns="payCol"
        style="margin-top: 8px;"
        @selectRowChange="handleSelectRowChange2"
        :checkbox-config="{checkMethod: payCheckboxkMethod}"
        :edit-config="{trigger: 'click', mode: 'cell', activeMethod: payactiveCellMethod}"
        :export-config="{}"
        :cell-style='cellStyle'
        bordered
      >
        <template v-slot:toolbarAfter>
          <a-button style="margin-bottom: 10px;margin-right: 10px" @click="submitsh2(1)">通过审核</a-button>
          <a-button @click="submitsh2(2)">驳回</a-button>
        </template>
      </j-vxe-table>
      <div style="margin-top: 30px"></div>
      <div
        :style="{
          // position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999,
        }"
      >
      </div>

    </a-spin>
  </a-drawer>
</template>

<script>
import BillForm from '@/views/jzxtrade/modules/BillForm'
import { httpAction, getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@api/api'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'
import { getDictItems } from '../../../components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '../../../api/api'
import { deleteAction, postAction } from '../../../api/manage'

export default {

  name: 'ExpenseEntrySh',
  components: {
    JFormContainer,
    BillForm,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {},
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      width: '95%',
      visible: true,
      selectedRowKeys: [],
      isdelete: false,
      billModalTitle: '',
      billConfirmLoading: false,
      billDataSource: [],
      totalPrice: '0',
      //费用名称
      costNames: [],
      costName: '',
      costCode: '',
      costModalVisible: false,
      receivableList: [],
      payList: [],
      confirmLoading: false,
      modelId: '',
      record: {},
      receiveCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0',
          statistics: ['sum']
        },
        {
          title: '账单号',
          key: 'billNumber',
          type: JVXETypes.normal,
          width: '200px'
        }, {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      payCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0',
          statistics: ['sum']
        },
        {
          title: '账单号',
          key: 'billNumber',
          type: JVXETypes.normal,
          width: '200px'
        }, {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      url: {
        save: '/box.ship/shipInfo/cost/add',
        queryById: '/box.ship/shipInfo/cost/queryByShipId',

        deleteurl: '/box.ship/shipInfo/cost/del',
        submiturl: '/box.ship/shipInfo/cost/submit/check'
      },
      receiveCellEdit: true,
      // 选择的行
      selectedRows: [],
      selectedRows2: [],
      jsdwDatas: []
    }
  },
  computed: {},
  created() {
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    // this.form.getFieldDecorator('boxType', { initialValue: [], preserve: true });

    // this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  methods: {
    billModalAddHandleCancel(e) {
      this.billConfirmLoading = false
    },
    billModalAddHandleOk(e) {
      this.$refs.billForm.submitBillInfo()
    },
    onSelectChange(val) {
      console.log(val)

    },
    submitsh1(val) {
      //1代表通过审核 2代表驳回
      var that = this
      let ids = []
      for (var i = 0; i < this.selectedRows.length; i++) {
        ids.push(this.selectedRows[i].id)
      }
      console.log('ids: ', ids)
      let param = { ids: ids }
      if (val == 1) {
        that.confirmLoading = true
        postAction(this.url.submiturl, param).then(res => {
          console.log(res)
          if (res.success) {
            that.$message.success(res.message)
            // that.$emit('allOk')
            that.selectAll()
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.confirmLoading = false
        })
      } else {

      }

    },
    submitsh2() {
      //1代表通过审核 2代表驳回
      var that = this
      let ids = []
      for (var i = 0; i < this.selectedRows2.length; i++) {
        ids.push(this.selectedRows2[i].id)
      }
      console.log('ds: ', ids)
      let param = { ids: ids }
      if (val == 1) {
        that.confirmLoading = true
        postAction(this.url.submiturl, param).then(res => {
          console.log(res)
          if (res.success) {
            that.$message.success(res.message)
            that.selectAll()
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.confirmLoading = false
        })
      } else {

      }

    },

    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {

      this.selectedRows = event.selectedRows
      // if (this.selectedRows.length > 0) {
      //   this.isdelete = true
      // } else {
      //   this.isdelete = false
      // }
    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange2(event) {
      this.selectedRows2 = event.selectedRows
      console.log(this.selectedRows)
    },
    //获取海运单号ID
    questId(record) {
      console.log('id:' + record.id)

      this.record = record
      this.modelId = record.id
      console.log('this.modelId:' + this.modelId)
      this.selectAll(this.modelId)

    },
    selectAll() {
      var that = this
      that.confirmLoading = true
      let params = { 'shipId': this.modelId }
      getAction(this.url.queryById, params).then((res) => {
        if (res.success) {
          that.receivableList = res.result.ysList
          that.payList = res.result.yfList
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    allclose() {
      this.$emit('allclose')
    },
    recCheckboxkMethod({ row }) {
      return row.scode != 2
    },
    recactiveCellMethod({ row, rowIndex }) {
      if (row.scode != 2) {
        return true
      }
      return false
    },
    payCheckboxkMethod({ row }) {
      return row.scode != 2
    },
    payactiveCellMethod({ row, rowIndex }) {
      if (row.scode != 2) {
        return true
      }
      return false
    },
    exportDataEvent(val) {

    },
    cellStyle(row) {
      // console.log(row.row);
      if (row.row.scode == 2) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #fff1cf !important;fontSize: 16px; color: #777777`
      } else {
        return `fontSize: 16px; color: #777777`
      }
    },
    afterVisibleChange(val) {
      console.log('expenseVisible', val)
    },
    close() {
      this.$emit('close')
      this.visible = false
    }
  }
}

</script>

<style>
.ant-drawer-header {
  position: relative;
  padding: 16px 24px;
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
}
</style>